<template>
	<view class="comBox" :style="{paddingTop: vuex_custom_bar_height+ 'px'}">
		<tn-nav-bar>订单评论</tn-nav-bar>
		<view class="comBg">
			<view class="goods">
				<view class="img"><image :src="getSrc()" mode="aspectFit"></image></view>
				<view class="cont">
					<view class="tit">{{getTitle()}}</view>
					<view class="ftit" v-if="detail.mentor.topic.name">{{detail.mentor.topic.name}}</view>
				</view>
			</view>
			<!-- 描述相符 -->
			<view class="describe">
				<view class="tit">服务/活动相符</view>
				<view class="iconBox">
					<view class="icon" @click="isGood(2)" :class="{iconCurr:form.is_good == 2}">
						<view class="tn-icon-emoji-good iconfont " :class="{'tn-icon-emoji-good-fill':form.is_good == 2}"></view>
						<view class="name">好评</view>
					</view>
					<view class="icon" @click="isGood(1)" :class="{iconCurr:form.is_good == 1}">
						<view class="tn-icon-emoji-general iconfont" :class="{'tn-icon-emoji-general-fill':form.is_good == 1}"></view>
						<view class="name">中评</view>
					</view>
					<view class="icon" @click="isGood(0)" :class="{iconCurr:form.is_good == 0}">
						<view class="tn-icon-emoji-sad iconfont" :class="{'tn-icon-emoji-sad-fill':form.is_good == 0}"></view>
						<view class="name">差评</view>
					</view>
				</view>
			</view>
			<!-- 多角度评论 -->
			<view class="comTxt">
				<textarea v-model="form.content" placeholder="✐从多个角度评价,可以帮助更多用户"></textarea>
			</view>
			<!-- 拍摄 -->
			<view class="shotBox">
				<scroll-view :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
					<view class="shotImg">
						<view class="img" v-for="(img,Mindex) in form.images" :key="Mindex" data-index="{Mindex}" data-id="Mindex" v-model="form.images">
							<image :src="img"></image>
							<text class="tn-icon-delete" @click="delBtn(index,Mindex)"></text>
						</view>
						<view class="shot" @click="upImage(index)">
							<view class="icon"><text class="iconfont tn-icon-camera"></text></view>
							<view class="shotInfo">拍用户秀</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		
		<!-- 评论 -->
		<view class="comBg starsBox">
			<view class="tit">服务评分</view>
			<view class="starts">
				<view class="row">
					<view class="name">服务评分</view>
					<view class="start"><tn-rate :allowHalf="true" v-model="form.star" activeColor="#FF6708"></tn-rate></view>
				</view>
			</view>
		</view>
		
		<view class="comBg starsBox">
			<button class="confirm-btn"  @click="subComment" :disabled="logining">提交评论</button>
		</view>
	</view>
</template>

<script>
	import {orderDetail,commentOrder} from '@/api/user/index.js'
	import {uploadUrl} from '@/api/user/login.js'
	export default {
		
		data() {
			return {
				index:0,
				scrollInto: '',
				order_sn:'',
				detail:{},
				form:{
					images:[],
					star:5,
					is_good:2,
					content:"",
					order_sn:""
				}
			}
		},
		
		onLoad(options) {
			this.order_sn = options.order_sn
			this.form.order_sn = options.order_sn
			
			this.iniData()
		},
		
		methods: {
			isGood(n){
				this.form.is_good = n
			},
			getTitle(){
			  if(this.detail.type == 0) return this.detail.mentor.nickname
			  if(this.detail.type == 1) return this.detail.space.title
			  if(this.detail.type == 2) return this.detail.activity.title
			},
			getSrc(){
			  if(this.detail.type == 0) return this.detail.mentor.user.avatar
			  if(this.detail.type == 1) return this.detail.space.pic
			  if(this.detail.type == 2) return this.detail.activity.pic
			},
			iniData(){
				orderDetail({order_sn:this.order_sn}).then(res=>{
					this.detail = res
				})
			},
			subComment:function(){
				if(!this.form.content || this.form.content.length < 2){
					uni.showToast({
						icon:'none',
						title:"评论内容不能为空！"
					})
					return false;
				}
				var _t = this
				commentOrder(this.form).then(res=>{
					uni.showToast({
						icon:'none',
						title:"评论成功",
						duration:3000
					})
					
					setTimeout(function(){
						_t.navBack();
					}, 3000)
				})
			},
			
			// 返回上一页
			navBack() {
			  
			  // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
			  const pages = getCurrentPages()
			  if (pages && pages.length > 0) {
			    const firstPage = pages[0]
			    if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
			      uni.reLaunch({
			        url: '/pages/index/index'
			      })
			    } else {
			      uni.navigateBack({
			        delta: 1
			      })
			    }
			  } else {
			    uni.reLaunch({
			      url: '/pages/index/index'
			    })
			  }
			},
			upFile(filePath, index){
				uni.uploadFile({
					url: uploadUrl,
					filePath: filePath,
					name: 'image',
					success: (res) => {
						var data = JSON.parse(res.data)
						if(data.code == 200){
							this.form.images.push(data.data.url);
						}
					},
					fail: (err) => {
						uni.showModal({
							content: err.errMsg || err.msg,
							showCancel: false
						});
					}
				})
			},
			upImage(index){
				var that = this
				uni.chooseImage({
					count:5,
					sizeType:['compressed'],
					sourceType:['album'],
					success: (res) => {
						res.tempFilePaths.map(re=>{
							that.upFile(re, index)
						})
					},
					fail: (err) => {
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '需要从您的相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			// 点击删除
			delBtn(index,Mindex){
				this.form.images.splice(Mindex,1);
			}
		}
	}
</script>

<style lang="scss">
	page{background:#f0f0f0;}
	.comBg{background:#fff;border-radius: 10rpx;margin: 20rpx;padding: 20rpx;}
	.goods{
		display: flex;align-items: center;
		.img{width:120rpx;height:120rpx;overflow: hidden;border-radius: 6rpx;image{width: 100%;height: 100%;}}
		.cont{margin-left: 20rpx;flex: 1;}
		.tit{font-size: 30rpx;color:#555;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;
			-webkit-box-orient:vertical;-webkit-line-clamp:1
			}
		.ftit{font-size: 26rpx;color:#999;margin-top:10rpx;}
	}
	.describe,.iconBox,.iconBox .icon{display: flex;align-items: center;}
	.describe{
		margin-top:30rpx;
		.tit{margin-right: 20px;}
		.iconBox,.iconBox .icon{flex: 1;}
		.iconBox{
			.name{margin-left: 10rpx;}
		}
		.iconCurr .iconfont,.iconCurr .name{color:$tn-main-orange;}
	}
	.comTxt{margin-top: 30rpx;
		textarea{font-size: 28rpx;color:#999;width:100%;}
		textarea::-webkit-input-placeholder{color:#ccc;}
		.note{color:#999;font-size:26rpx;}
		.note text{color:#f04447;margin: 0 8rpx;}
	}
	.shotBox{margin-top: 30px;
		.shotImg{
			display: flex;padding: 10px 0;
			.img{width: 200rpx;height: 200rpx; margin-right:20rpx;position: relative;
				image{width: 100%;height: 100%;object-fit: cover;}
				text{position: absolute;display: block;width: 40rpx;height: 40rpx;text-align: center;
				line-height: 40rpx;right:0rpx;background: rgba(0,0,0,0.6);color:#fff;border-radius: 50%;
				top: -10rpx;
				}
			}
		}
		.shot{background:#eee;border: 1px dashed #ddd;width:200rpx;height: 200rpx;
			text-align: center;border-radius: 10rpx;
			.icon{margin-top:40rpx;}
			.icon .iconfont{font-size:80rpx;}
		}
	}
	.starsBox{
		.tit{font-size:32rpx;}
		.starts{margin-top: 30rpx;
			.row{display: flex;align-items: center;margin-bottom: 30rpx;}
			.name{font-size: 28rpx;font-weight: bold;}
			.start{flex:2;margin: 0 40rpx;}
			.cont{flex: 1;color:#f04447;font-size: 28rpx;font-weight: bold;}
		}
	}
	.confirm-btn{width: 630rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 50px;
		background: $tn-main-orange;;
		color: #fff;
		font-size: 14px;
		&:after{
			border-radius: 100px;
		}}
</style>
